import React, { useEffect, useRef, useState } from 'react';

import { useContinuousAction } from './hooks/useContinuousAction';
import './style.css';

type Props = {
  /** 外层容器类名 */
  scrollbarClassName?: string;
  /** 外层容器样式 */
  scrollbarStyle?: React.CSSProperties;
  /** 轨道类名 */
  scrollbarTrackClassName?: string;
  /** 轨道样式 */
  scrollbarTrackStyle?: React.CSSProperties;
  /** 滑块类名 */
  scrollbarThumbClassName?: string;
  /** 滑块样式 */
  scrollbarThumbStyle?: React.CSSProperties;
  /** 滚动目标 */
  getScrollTarget: () => Element;
  /** 滚动方向 */
  direction?: 'horizontal' | 'vertical';
  /** 最小滑块高度 */
  minThumbHeight?: number;
  /** 最小滑块宽度 */
  minThumbWidth?: number;
  /** 横向滚动系数 */
  horizontalScrollCoefficient?: number;
  /** 纵向滚动系数 */
  verticalScrollCoefficient?: number;
  /** 基础定时 */
  baseInterval?: number;
  /** 加速间隔步长 ms */
  speedIncreaseStep?: number;
  /** 显示方向按钮 */
  showDirectionButton?: boolean;
  /** 自动透明 */
  autoOpacity?: boolean;
};

let timer: any = null;
let wheelTimer: any = null;
let targetScrollTimer: any = null;

let startPosition = 0;
let startScroll = 0;

const Scrollbar = ({
  scrollbarClassName = '',
  scrollbarStyle = {},
  scrollbarTrackClassName = '',
  scrollbarTrackStyle = {},
  scrollbarThumbClassName = '',
  scrollbarThumbStyle = {},
  direction = 'vertical',
  minThumbHeight = 20,
  minThumbWidth = 20,
  horizontalScrollCoefficient = 0.1,
  verticalScrollCoefficient = 0.5,
  baseInterval = 200,
  speedIncreaseStep = 500,
  showDirectionButton = false,
  autoOpacity = false,
  getScrollTarget,
}: Props) => {
  const scrollbarRef = useRef<HTMLDivElement>(null);
  const trackRef = useRef<HTMLDivElement>(null);
  const thumbRef = useRef<HTMLDivElement>(null);

  const frontButtonRef = useRef<HTMLDivElement>(null);
  const backButtonRef = useRef<HTMLDivElement>(null);

  const targetContainerRef = useRef<Element>();

  const scrollMultiplier = useRef(1);

  const wheelDirection = useRef(100);

  const isMove = useRef(false);
  const isScroll = useRef(false);
  const isWheel = useRef(false);
  const isEnter = useRef(false);

  const [scrollbarSize, setScrollBarSize] = useState(0);

  // 获取容器和内容的尺寸信息
  const getContainerDimensions = () => {
    if (!targetContainerRef.current) {
      return {
        containerHeight: 0,
        containerWidth: 0,
        contentHeight: 0,
        contentWidth: 0,
      };
    }

    const containerHeight = targetContainerRef.current.clientHeight;
    const containerWidth = targetContainerRef.current.clientWidth;
    const contentHeight = targetContainerRef.current.scrollHeight;
    const contentWidth = targetContainerRef.current.scrollWidth;

    return {
      containerHeight,
      containerWidth,
      contentHeight,
      contentWidth,
    };
  };

  /**
   * 计算垂直滚动条滑块的高度
   * @returns {number} 滑块高度（像素）
   */
  const calculateScrollbarThumbSize = () => {
    const { containerHeight, containerWidth, contentHeight, contentWidth } =
      getContainerDimensions();

    if (direction === 'vertical') {
      if (contentHeight <= containerHeight) {
        return 0;
      }
      // 计算滑块高度（通常还会有最小高度限制）
      const thumbHeight = (containerHeight / contentHeight) * containerHeight;

      return Math.max(thumbHeight, minThumbHeight);
    }

    if (direction === 'horizontal') {
      if (contentWidth <= containerWidth) {
        return 0;
      }

      // 计算滑块宽度（通常还会有最小宽度限制）
      const thumbWidth = (containerWidth / contentWidth) * containerWidth;

      return Math.max(thumbWidth, minThumbWidth);
    }

    return 0;
  };

  // 计算动态滚动步长
  const calculateScrollStep = (e?: WheelEvent) => {
    if (!targetContainerRef.current) {
      return 0;
    }

    const containerHeight = targetContainerRef.current.clientHeight;
    const containerWidth = targetContainerRef.current.clientWidth;
    const contentHeight = targetContainerRef.current.scrollHeight;
    const contentWidth = targetContainerRef.current.scrollWidth;

    if (direction === 'vertical') {
      // 基础步长为容器高度的1/5
      // 当内容远大于容器时，适当增加步长但不超过容器高度的1/2
      const baseStep = containerHeight / 5;
      const maxStep = containerHeight / 2;

      // 内容超出容器越多，步长越大（但不超过最大值）
      const contentRatio = contentHeight / containerHeight;
      let dynamicStep = Math.min(
        baseStep * Math.min(contentRatio, 2.5),
        maxStep,
      );

      // 如果有滚轮事件，计算连续滚动的步长增长
      if (e) {
        // 检查滚动方向是否改变
        if (
          (wheelDirection.current > 0 && e.deltaY < 0) ||
          (wheelDirection.current < 0 && e.deltaY > 0)
        ) {
          scrollMultiplier.current = 1;
        }

        // 计算连续滚动的步长增长
        if (!isWheel.current) {
          scrollMultiplier.current = 1;
        } else {
          scrollMultiplier.current = Math.min(
            scrollMultiplier.current + verticalScrollCoefficient,
            10,
          );
        }

        // 应用步长倍数
        dynamicStep = dynamicStep * scrollMultiplier.current;
      }

      return Math.round(dynamicStep);
    } else {
      // 获取基础步长为容器宽度的1/5
      // 当内容远大于容器时，适当增加步长但不超过容器宽度的1/2
      const baseStep = containerWidth / 5;
      const maxStep = containerWidth / 2;

      // 内容超出容器越多，步长越大（但不超过最大值）
      const contentRatio = contentWidth / containerWidth;
      let dynamicStep = Math.min(
        baseStep * Math.min(contentRatio, 2.5),
        maxStep,
      );

      // 如果有滚轮事件，计算连续滚动的步长增长
      if (e) {
        // 检查滚动方向是否改变
        if (
          (wheelDirection.current > 0 && e.deltaY < 0) ||
          (wheelDirection.current < 0 && e.deltaY > 0)
        ) {
          scrollMultiplier.current = 1;
        }

        // 计算连续滚动的步长增长
        if (!isWheel.current) {
          scrollMultiplier.current = 1;
        } else {
          scrollMultiplier.current = Math.min(
            scrollMultiplier.current + horizontalScrollCoefficient,
            10,
          );
        }

        // 应用步长倍数
        dynamicStep = dynamicStep * scrollMultiplier.current;
      }

      return Math.round(dynamicStep);
    }
  };

  /**
   * 更新滚动滑块位置
   */
  const updateThumbPosition = (position: number) => {
    if (!thumbRef.current) return;

    const { containerHeight, containerWidth, contentHeight, contentWidth } =
      getContainerDimensions();

    if (direction === 'vertical') {
      if (contentHeight <= containerHeight) return;
      // 纵向滚动
      const buttonHeight = frontButtonRef.current?.clientHeight || 0;
      // 计算滑块位置比例
      const scrollRange = contentHeight - containerHeight;
      const scrollRatio = position / scrollRange;

      // 可滑动区域需要减去按钮高度
      const trackHeight = containerHeight - buttonHeight * 2;
      const thumbHeight = parseFloat(thumbRef.current.style.height) || 0;
      const maxThumbTop = trackHeight - thumbHeight;
      const thumbTop = scrollRatio * maxThumbTop;

      // 设置滑块位置，需要加上顶部按钮的高度作为偏移
      thumbRef.current.style.top = `${thumbTop}px`;
    } else {
      if (contentWidth <= containerWidth) return;
      // 横向滚动
      const buttonWidth = frontButtonRef.current?.clientWidth || 0;

      // 计算滑块位置比例
      const scrollRange = contentWidth - containerWidth;
      const scrollRatio = position / scrollRange;

      // 可滑动区域需要减去按钮宽度
      const trackWidth = containerWidth - buttonWidth * 2;
      const thumbWidth = parseFloat(thumbRef.current.style.width) || 0;
      const maxThumbLeft = trackWidth - thumbWidth;
      const thumbLeft = scrollRatio * maxThumbLeft;

      // 设置滑块位置，需要加上左侧按钮的宽度作为偏移
      thumbRef.current.style.left = `${thumbLeft}px`;
    }
  };

  /**
   * 目标容器滚动
   */
  const onTargetScroll = () => {
    if (isMove.current) return;
    if (isWheel.current) return;
    if (!thumbRef.current) return;
    if (!targetContainerRef.current) return;
    if (!scrollbarRef.current) return;

    isScroll.current = true;

    const { containerHeight, containerWidth, contentHeight, contentWidth } =
      getContainerDimensions();
    scrollbarRef.current.style.opacity = '1';
    thumbRef.current.style.transition = 'background-color 0.2s ease-in-out';
    if (direction === 'vertical') {
      // 内容未超出容器，不需要滚动
      if (contentHeight <= containerHeight) return;

      // 获取当前滚动位置（默认为0）
      const currentTop = Math.abs(targetContainerRef.current.scrollTop || 0);

      updateThumbPosition(currentTop);
    } else {
      // 横向滚动
      // 内容未超出容器，不需要滚动
      if (contentWidth <= containerWidth) return;

      // 获取当前滚动位置（默认为0）
      const currentLeft = Math.abs(targetContainerRef.current.scrollLeft || 0);

      updateThumbPosition(currentLeft);
    }

    if (autoOpacity) {
      clearTimeout(targetScrollTimer);
      targetScrollTimer = setTimeout(() => {
        if (!scrollbarRef.current) return;
        scrollbarRef.current.style.opacity = '0';
      }, 3000);
    }
    isScroll.current = false;
  };

  /**
   * 鼠标滚动
   * @param e
   * @returns
   */
  const onWheel = (e: WheelEvent) => {
    e.preventDefault();

    if (isMove.current) return;
    if (!targetContainerRef.current) return;
    if (!thumbRef.current) return;
    if (!scrollbarRef.current) return;

    isWheel.current = true;
    scrollbarRef.current.style.opacity = '1';

    clearTimeout(timer);
    clearTimeout(wheelTimer);
    wheelTimer = setTimeout(() => {
      isWheel.current = false;
      scrollMultiplier.current = 1;
    }, 500);

    if (autoOpacity && !isEnter.current) {
      clearTimeout(targetScrollTimer);
      targetScrollTimer = setTimeout(() => {
        if (!scrollbarRef.current) return;
        scrollbarRef.current.style.opacity = '0';
      }, 500);
    }

    const { containerHeight, containerWidth, contentHeight, contentWidth } =
      getContainerDimensions();

    // 获取当前滚动位置（默认为0）
    let step = calculateScrollStep(e);

    // 记录滚动方向
    wheelDirection.current = e.deltaY;
    thumbRef.current.style.transition =
      'background-color 0.2s ease-in-out, top 0.2s ease-in-out, left 0.2s ease-in-out';
    if (direction === 'vertical') {
      // 内容未超出容器，不需要滚动
      if (contentHeight <= containerHeight) return;

      // 计算最大滚动距离
      const maxScroll = contentHeight - containerHeight;
      let currentTop = Math.abs(targetContainerRef.current.scrollTop || 0);

      // 根据滚轮方向计算新的滚动位置（步长为30px）
      let newTop = e.deltaY > 0 ? currentTop + step : currentTop - step;

      // 限制在有效范围内
      newTop = Math.max(0, Math.min(newTop, maxScroll));

      // 容器滚动到指定位置
      targetContainerRef.current.scrollTo({
        top: newTop,
        behavior: 'smooth',
      });
      updateThumbPosition(newTop);
    } else {
      if (contentWidth <= containerWidth) return;
      const maxScroll = contentWidth - containerWidth;

      let currentLeft = Math.abs(targetContainerRef.current.scrollLeft || 0);
      let newLeft = e.deltaY > 0 ? currentLeft + step : currentLeft - step;
      newLeft = Math.max(0, Math.min(newLeft, maxScroll));
      targetContainerRef.current.scrollTo({
        left: newLeft,
        behavior: 'smooth',
      });
      updateThumbPosition(newLeft);
    }
  };

  /**
   * 点击滚动滑块
   * @param e
   * @returns
   */
  const onClickTrack = (e: MouseEvent) => {
    if (e.target === thumbRef.current) {
      return;
    }

    if (!targetContainerRef.current || !thumbRef.current || !trackRef.current) {
      return;
    }

    isWheel.current = true;
    clearTimeout(timer);
    timer = setTimeout(() => {
      isWheel.current = false;
    }, 1000);

    const { containerHeight, containerWidth, contentHeight, contentWidth } =
      getContainerDimensions();

    const containerRect = targetContainerRef.current.getBoundingClientRect();

    thumbRef.current.style.transition =
      'background-color 0.2s ease-in-out, top 0.2s ease-in-out, left 0.2s ease-in-out';

    if (direction === 'vertical') {
      // 内容未超出容器，不需要滚动
      if (contentHeight <= containerHeight) return;

      const clickY = e.clientY - containerRect.top;

      const thumbHeight = parseFloat(thumbRef.current.style.height);
      const buttonHeight = frontButtonRef.current?.clientHeight || 0;
      // 计算新的滑块位置
      let newThumbTop = clickY - thumbHeight / 2 - buttonHeight * 2;
      const maxThumbTop = containerHeight - thumbHeight;
      newThumbTop = Math.max(0, Math.min(newThumbTop, maxThumbTop));

      thumbRef.current.style.top = `${newThumbTop}px`;
      // 计算对应的内容滚动位置
      const scrollRatio = newThumbTop / maxThumbTop;
      const maxScroll = contentHeight - containerHeight;
      const newContentTop = scrollRatio * maxScroll;

      targetContainerRef.current.scrollTo({
        top: newContentTop,
        behavior: 'smooth',
      });
    } else {
      if (contentWidth <= containerWidth) return;

      const clickX = e.clientX - containerRect.left;
      const thumbWidth = parseFloat(thumbRef.current.style.width);
      const buttonWidth = frontButtonRef.current?.clientWidth || 0;
      let newThumbLeft = clickX - thumbWidth / 2;
      const maxThumbLeft = containerWidth - thumbWidth - buttonWidth * 2;
      newThumbLeft = Math.max(0, Math.min(newThumbLeft, maxThumbLeft));
      thumbRef.current.style.left = `${newThumbLeft}px`;

      const scrollRatio = newThumbLeft / maxThumbLeft;
      const maxScroll = contentWidth - containerWidth;
      const newContentLeft = scrollRatio * maxScroll;
      targetContainerRef.current.scrollTo({
        left: newContentLeft,
        behavior: 'smooth',
      });
    }
  };

  /**
   * 鼠标按下
   * @param e
   */
  const onMouseDown = (e: MouseEvent) => {
    if (!targetContainerRef.current) return;

    isMove.current = true;
    const { clientX, clientY } = e;

    const scrollValue = Math.abs(
      targetContainerRef.current[
        direction === 'vertical' ? 'scrollTop' : 'scrollLeft'
      ] || 0,
    );

    startScroll = scrollValue;
    startPosition = direction === 'vertical' ? clientY : clientX;
  };
  /**
   * 鼠标移动
   * @param e
   */
  const onMouseMove = (e: MouseEvent) => {
    if (!isMove.current) return;
    if (!targetContainerRef.current) return;
    if (!thumbRef.current) return;

    const { containerHeight, containerWidth, contentHeight, contentWidth } =
      getContainerDimensions();

    const thumbHeight = parseFloat(thumbRef.current.style.height) || 20;
    const thumbWidth = parseFloat(thumbRef.current.style.width) || 20;
    isScroll.current = true;

    if (direction === 'vertical') {
      // 内容未超出容器，不需要滚动
      if (contentHeight <= containerHeight) return;

      // 计算拖拽距离
      const deltaY = e.clientY - startPosition;

      // 计算最大滚动距离和最大滑块移动距离
      const maxScroll = contentHeight - containerHeight;
      const maxThumbTop = containerHeight - thumbHeight;

      // 计算比例
      const ratio = maxScroll / maxThumbTop;

      // 计算新的滚动位置
      let newScrollTop = startScroll + deltaY * ratio;

      // 限制在有效范围内
      newScrollTop = Math.max(0, Math.min(newScrollTop, maxScroll));

      // 更新内容位置
      targetContainerRef.current.scrollTop = newScrollTop;
      thumbRef.current.style.transition = 'background-color 0.2s ease-in-out';
      updateThumbPosition(newScrollTop);
    } else {
      if (contentWidth <= containerWidth) return;
      const deltaX = e.clientX - startPosition;
      const maxScroll = contentWidth - containerWidth;
      const maxThumbLeft = containerWidth - thumbWidth;
      const ratio = maxScroll / maxThumbLeft;
      let newScrollLeft = startScroll + deltaX * ratio;
      newScrollLeft = Math.max(0, Math.min(newScrollLeft, maxScroll));
      targetContainerRef.current.scrollLeft = newScrollLeft;
      thumbRef.current.style.transition = 'background-color 0.2s ease-in-out';
      updateThumbPosition(newScrollLeft);
    }
  };

  /**
   *
   * @param e 鼠标抬起
   */
  const onMouseUp = () => {
    isMove.current = false;
    isScroll.current = false;
    scrollMultiplier.current = 1;

    if (autoOpacity && scrollbarRef.current && !isEnter.current) {
      clearTimeout(targetScrollTimer);
      targetScrollTimer = setTimeout(() => {
        if (!scrollbarRef.current) return;
        scrollbarRef.current.style.opacity = '0';
      }, 3000);
    }
  };

  const onClickDirectionButton = (buttonDirection: 'front' | 'back') => {
    if (!targetContainerRef.current) return;
    if (!thumbRef.current) return;

    isScroll.current = true;
    isWheel.current = true;
    clearTimeout(timer);
    clearTimeout(wheelTimer);
    wheelTimer = setTimeout(() => {
      isWheel.current = false;
      scrollMultiplier.current = 1;
    }, 200);
    timer = setTimeout(() => {
      isScroll.current = false;
    }, 500);

    const { containerHeight, containerWidth, contentHeight, contentWidth } =
      getContainerDimensions();

    let step = calculateScrollStep();

    if (direction === 'vertical') {
      // 内容未超出容器，不需要滚动
      if (contentHeight <= containerHeight) return;

      // 计算最大滚动距离
      const maxScroll = contentHeight - containerHeight;
      let currentTop = Math.abs(targetContainerRef.current.scrollTop || 0);

      // 根据滚轮方向计算新的滚动位置（步长为30px）
      let newTop =
        buttonDirection === 'back' ? currentTop + step : currentTop - step;

      // 限制在有效范围内
      newTop = Math.max(0, Math.min(newTop, maxScroll));

      // 容器滚动到指定位置
      targetContainerRef.current.scrollTo({
        top: newTop,
        behavior: 'smooth',
      });
      thumbRef.current.style.transition =
        'background-color 0.2s ease-in-out,top 0.2s ease-in-out';
      updateThumbPosition(newTop);
    } else {
      if (contentWidth <= containerWidth) return;
      const maxScroll = contentWidth - containerWidth;

      let currentLeft = Math.abs(targetContainerRef.current.scrollLeft || 0);
      let newLeft =
        buttonDirection === 'back' ? currentLeft + step : currentLeft - step;
      newLeft = Math.max(0, Math.min(newLeft, maxScroll));
      targetContainerRef.current.scrollTo({
        left: newLeft,
        behavior: 'smooth',
      });
      thumbRef.current.style.transition =
        'background-color 0.2s ease-in-out,left 0.2s ease-in-out';
      updateThumbPosition(newLeft);
    }
  };

  const {
    onMouseDown: onMouseDownLeft,
    onMouseUp: onMouseUpLeft,
    onTouchEnd: onTouchEndLeft,
    onTouchStart: onTouchStartLeft,
  } = useContinuousAction(() => onClickDirectionButton('front'), {
    baseInterval,
    speedIncreaseStep,
  });

  const {
    onMouseDown: onMouseDownRight,
    onMouseUp: onMouseUpRight,
    onTouchEnd: onTouchEndRight,
    onTouchStart: onTouchStartRight,
  } = useContinuousAction(() => onClickDirectionButton('back'), {
    baseInterval,
    speedIncreaseStep,
  });

  const onMouseEnterScrollbar = () => {
    isEnter.current = true;
    clearTimeout(targetScrollTimer);
    if (autoOpacity && scrollbarRef.current) {
      scrollbarRef.current.style.opacity = '1';
    }
  };
  const onMouseLeaveScrollbar = () => {
    isEnter.current = false;
    clearTimeout(targetScrollTimer);
    if (autoOpacity && scrollbarRef.current && !isScroll.current) {
      targetScrollTimer = setTimeout(() => {
        if (!scrollbarRef.current) return;
        scrollbarRef.current.style.opacity = '0';
      }, 3000);
    }
  };

  const onResize = () => {
    if (!targetContainerRef.current || !scrollbarRef.current) return;

    const size = calculateScrollbarThumbSize();

    setScrollBarSize(size);

    if (direction === 'vertical') {
      scrollbarRef.current.style.height =
        targetContainerRef.current.clientHeight + 'px';
      let currentTop = Math.abs(targetContainerRef.current.scrollTop || 0);
      updateThumbPosition(currentTop);
    } else {
      scrollbarRef.current.style.width =
        targetContainerRef.current.clientWidth + 'px';
      let currentLeft = Math.abs(targetContainerRef.current.scrollLeft || 0);
      updateThumbPosition(currentLeft);
    }
  };

  useEffect(() => {
    const container = getScrollTarget();
    if (container) {
      targetContainerRef.current = container;
      const size = calculateScrollbarThumbSize();
      setScrollBarSize(size);

      if (scrollbarRef.current) {
        if (direction === 'vertical') {
          scrollbarRef.current.style.height = container.clientHeight + 'px';
        } else {
          scrollbarRef.current.style.width = container.clientWidth + 'px';
        }
      }

      const resizeObserver = new ResizeObserver(onResize);

      resizeObserver.observe(container);
      // 拖拽移动
      trackRef.current?.addEventListener('click', onClickTrack);
      trackRef.current?.addEventListener('wheel', onWheel);
      thumbRef.current?.addEventListener('mousedown', onMouseDown);

      targetContainerRef.current?.addEventListener('scroll', onTargetScroll);

      document.addEventListener('mouseup', onMouseUp);
      document.addEventListener('mousemove', onMouseMove);

      return () => {
        resizeObserver.disconnect();

        trackRef.current?.removeEventListener('click', onClickTrack);
        trackRef.current?.removeEventListener('wheel', onWheel);
        thumbRef.current?.removeEventListener('mousedown', onMouseDown);

        targetContainerRef.current?.removeEventListener(
          'scroll',
          onTargetScroll,
        );

        document.removeEventListener('mouseup', onMouseUp);
        document.removeEventListener('mousemove', onMouseMove);
      };
    } else {
      console.warn('滚动容器不存在！！！');
    }
  }, []);

  return (
    <div
      className={`rc-scrollbar rc-scrollbar-${direction} ${scrollbarClassName} ${
        autoOpacity ? 'rc-scrollbar-opacity' : ''
      }`}
      ref={scrollbarRef}
      style={scrollbarStyle}
      onMouseEnter={onMouseEnterScrollbar}
      onMouseLeave={onMouseLeaveScrollbar}
    >
      {showDirectionButton && (
        <div
          className={`rc-direction-button rc-direction-button-front-${direction} rc-direction-button-${direction}`}
          ref={frontButtonRef}
          onMouseDown={onMouseDownLeft}
          onMouseUp={onMouseUpLeft}
          onTouchStart={onTouchStartLeft}
          onTouchEnd={onTouchEndLeft}
        ></div>
      )}

      <div
        ref={trackRef}
        className={`rc-scrollbar-track  ${scrollbarTrackClassName}`}
        style={scrollbarTrackStyle}
      >
        <div
          ref={thumbRef}
          className={`rc-scrollbar-thumb ${scrollbarThumbClassName}`}
          style={{
            ...scrollbarThumbStyle,
            height: direction === 'vertical' ? scrollbarSize : '100%',
            width: direction === 'horizontal' ? scrollbarSize : '100%',
          }}
        ></div>
      </div>
      {showDirectionButton && (
        <div
          className={`rc-direction-button rc-direction-button-back-${direction} rc-direction-button-${direction}`}
          ref={backButtonRef}
          onMouseDown={onMouseDownRight}
          onMouseUp={onMouseUpRight}
          onTouchStart={onTouchStartRight}
          onTouchEnd={onTouchEndRight}
        ></div>
      )}
    </div>
  );
};

export default Scrollbar;
